<template>
    <vab-card 
        shadow="always" 
        v-loading="loading" 
        element-loading-background="rgba(122, 122, 122, 0.6)"
    >
      <template #header>
        <span class="leve2_title">适用范围</span>
      </template>
      <template #default>
        <el-form :ref="(el) => (baseFormRef = el)" class="form_search">
          <el-row :gutter="24">
            <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
              <!-- 默认项 -->
              <el-form-item label="使用客户">
                <VabSelectForm
                  multiple
                  :options="custom.list"
                  v-model="custom.value"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-form
          :ref="(el) => (tableFormRef = el)"
          :model="tableForm"
          label-width="130px"
          class="form_search"
        >
          <el-table border :data="tableForm" style="width: 100%" height="300px">
            <el-table-column label="序号" align="center" width="60">
              <template #default="scope">
                <span class="ellipsis" v-text="scope.$index + 1"></span>
              </template>
            </el-table-column>
            <el-table-column prop="custom_no" label="客户编码" align="center" />
            <el-table-column
              prop="custom_name"
              label="客户名称"
              align="center"
            />
            <el-table-column prop="isDefault" label="是否为默认" align="center">
              <template #default="scope">
                {{ '否' }}
                <!-- <VabSelectForm 
                            multiple
                            :options="custom.list"
                            v-model="scope.isDefault"
                        /> -->
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="70">
              <template #default="props">
                <vab-icon
                  icon="add-circle-line"
                  class="button_add"
                  @click="handleClickAdd(props.row)"
                />
                <vab-icon
                  icon="delete-bin-5-line"
                  @click="handleClickRemove(props.$index)"
                />
              </template>
            </el-table-column>
          </el-table>
        </el-form>
      </template>
    </vab-card>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
/**
 * @props
 */
defineProps({
  loading: {
    type: Boolean,
    default: false
  }
})

/**
 * @import
 */

/**
 * @var
 */
const baseFormRef = ref<any>(null)
const tableFormRef = ref<any>(null)
const tableForm = reactive<any>([
  { custom_no: 4546546456, custom_name: '马冬梅', isDefault: 0 },
  { custom_no: 5656566447, custom_name: '马冬梅', isDefault: 0 },
  { custom_no: 5656566448, custom_name: '马冬梅', isDefault: 0 },
  { custom_no: 5656566449, custom_name: '马冬梅', isDefault: 0 },
  { custom_no: 5656566440, custom_name: '马冬梅', isDefault: 0 },
])

const custom = reactive<any>({
  value: '',
  list: [
    { value: 0, label: '否' },
    { value: 1, label: '是' },
  ],
})
/**
 * @method
 */
// 添加
const handleClickAdd = (row: any) => {
  tableForm.push({ ...row, custom_no: '' })
}
// 删除
const handleClickRemove = (index: number) => {
  tableForm.splice(index, 1)
}
/**
 * @实例
 */
defineExpose({
  tableFormRef,
  tableForm,
})
</script>

<style scoped lang="scss">
:deep() {
  .el-loading-spinner {
    display: none;
  }
}
</style>
